<template>
  <div>
    <el-row>
      <el-card>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="用户管理" name="first">
            <el-form>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="车辆编号:">
                    <el-input
                      v-model="formData.id"
                      style="width: 50%"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="车牌号码:">
                    <el-input
                      v-model="formData.licensePlate"
                      style="width: 50%"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="车型名称:">
                    <el-input
                      v-model="formData.truckTypeName"
                      style="width: 50%"
                    >
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="车辆体积:">
                    <el-input
                      v-model="formData.allowableVolume"
                      style="width: 50%"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="车辆载重:">
                    <el-input
                      v-model="formData.allowableLoad"
                      style="width: 50%"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="GPSID:">
                    <el-input
                      v-model="formData.deviceGpsId"
                      style="width: 50%"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <el-upload action="#" list-type="picture-card" :auto-upload="false">
              <i slot="default" class="el-icon-plus"></i>
              <div slot="file" slot-scope="{ file }">
                <img-
                  class="el-upload-list__item-thumbnail"
                  :src="file.url"
                  alt=""
                />
                <span class="el-upload-list__item-actions">
                  <span
                    class="el-upload-list__item-preview"
                    @click="handlePictureCardPreview(file)"
                  >
                    <i class="el-icon-zoom-in"></i>
                  </span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleDownload(file)"
                  >
                    <i class="el-icon-download"></i>
                  </span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleRemove(file)"
                  >
                    <i class="el-icon-delete"></i>
                  </span>
                </span>
              </div>
            </el-upload>
          </el-tab-pane>
          <el-tab-pane label="配置管理" name="second">行驶证信息</el-tab-pane>
        </el-tabs>
        <el-row type="flex" justify="center">
          <el-button size="medium" type="primary">编辑</el-button>
        </el-row>
      </el-card>
    </el-row>
  </div>
</template>

<script>
import { getXiangqingDateApi } from "@/api/cheAdmin";

export default {
  data() {
    return {
      id: this.$route.params.id,
      activeName: "first",
      formData: {},
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
    };
  },
  created() {
    this.getXiangqingDateInfo();
  },
  methods: {
    async getXiangqingDateInfo() {
      console.log(this.id);
      const res = await getXiangqingDateApi(this.id);
      console.log(res);
      this.formData = res.data.data;
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleRemove(file) {
      console.log(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-tabs__active-bar {
  margin-left: 40px;
}
::v-deep .el-tabs--top .el-tabs__item.is-top {
  margin-left: 40px;
}
.el-form {
  ::v-deep .el-form-item__label {
    margin-left: 50px;
    width: 72px;
  }
  //el-form-item__label
}
::v-deep .el-upload--picture-card {
  margin-left: 50px;
}
::v-deep .el-upload-list--picture-card .el-upload-list__item {
  margin-left: 50px;
}
</style>
